<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<form class="layui-form" style="width: 400px" >
    <div class="layui-form-item" style="width: 400px">
        <label class="layui-form-label" style="padding-left: 0;padding-right: 0">目标位置：</label>
        <div class="layui-input-block">
            <select id="group" name="group" class="layui-input" lay-verify="required" lay-search="" lay-filter="demo">
                <option th:each="group:${groups}"  th:value="${group}" th:text="${group}"></option>
            </select>
        </div>
    </div>
</form>
<div id="test2" class="demo-transfer"></div>
<div align="center">
    <button type="button" class="layui-btn" lay-demotransferactive="getData">提交</button>
    <button type="button" class="layui-btn" lay-demotransferactive="reload">重置</button>
</div>
</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    var oldName=[[${oldName}]];
    var index = parent.layer.getFrameIndex(window.name);
    layui.use(['form','transfer', 'layer', 'util'], function(){
        var form = layui.form;
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
        var newName='目标位置';
        form.on('select(demo)',function(data){
            newName=data.value;
            console.log(newName+"---"+data.value)//打印当前select选中的值
        });
        //模拟数据
        var data1=[[${data}]];
        /*var data1 = [
            {"value": "1", "title": "李白"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅", "disabled": true}
            ,{"value": "6", "title": "巴金"}
            ,{"value": "7", "title": "冰心"}
            ,{"value": "8", "title": "矛盾"}
            ,{"value": "9", "title": "贤心"}
        ];*/
        //定义标题及数据源
        transfer.render({
            elem: '#test2'
            ,title: [oldName, newName]  //自定义标题
            ,data: data1
            ,showSearch: true
            ,id: 'key123' //定义唯一索引
            //,width: 150 //定义宽度
            ,height: 300 //定义高度
        });
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                var data = zhuan(getData);
                if (newName=='目标位置'){
                    layer.msg('未选择目标位置',{icon:0});
                    return false
                }
                var flage=false;
                $.ajax({
                    type:"POST",
                    /*contentType : 'application/json; charset=UTF-8',*/
                    url:"/show/updateGroupName/"+oldName+"/"+newName,
                    data :{"maps":data},
                    async: false,
                    success:function(data){
                        if (data==1){
                            flage=true;
                        }
                    }
                });
                if (flage){
                    layer.msg('穿梭成功',{icon:6});
                }else {
                    layer.msg('穿梭失败',{icon:5});
                }
                setTimeout(function () {
                    window.parent.location.reload();//刷新父页面
                    parent.layer.close(index);
                }, 2000);
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    title: [oldName, '目标位置']
                    /*,value: ['2', '5', '9']*/
                    ,showSearch: true
                })
            }
        });
    });
    function zhuan(getData) {
        var data=[];
        $.each(getData,function(i,item){
            console.log(i, item);
            data.push(item.value)
        });
        return data;
    }
</script>

</html>